<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/education/educationHome')"
        >
          教育培训
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37">培训机构</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="top">
      <a-input
        v-model="msgons"
        placeholder="请输入关键字"
        class="searchInput"
      />
      <div class="searchIcon">
        <img src="@/assets/image/icon1.png" alt="" />
        <span @click="searchSel()">搜索</span>
      </div>
    </div>
    <div class="conder">
      <div class="cOsingleCF">
        <div>
          <span class="x5TXt">地区：</span>
        </div>
        <div style="margin-left: 24px">
          <ul class="pIul2" id="pIul2">
            <li
              @click="selColor(null)"
              :class="{ sconColor: selnumber == null }"
            >
              全部
            </li>
            <li
              :class="{ sconColor: selnumber == item.code }"
              @click="selColor(item.code)"
              v-for="(item, index) in provinceList"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <span class="pIspan3" v-show="flag == 1" @click="navbar(1)"
          >展开&nbsp;<a-icon type="caret-down"
        /></span>
        <span class="pIspan3" v-show="flag == 2" @click="navbar(2)"
          >收起&nbsp;<a-icon type="caret-left"
        /></span>
      </div>
      <!-- 职位展示区域 -->
      <div class="coRsingleCF">
        <div
          class="listDiv"
          @click="getJumpdetailsO(item.comCode)"
          v-for="(item, list) in jigouList"
          :key="list"
        >
          <div>
            <img
              :src="imageWebUrl + item.logo"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </div>
          <div>
            <span class="titleTxt2" :title="item.name" >
              {{ item.name }}
            </span>
            <span style="margin-top: 16px; margin-bottom: 8px" class="timeTxt2"
              >培训项目<a>{{ item.trainingNum }}</a
              >个</span
            >
            <span class="timeTxt2">地点：{{ item.province }}</span>
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin: 68px"
        v-if="jigouList.length < 1"
      />
    </div>
    <div class="cnBottom" v-if="jigouList.length > 11">
      <div style="margin: 0 auto; width: 230px">
        <a-button v-if="btnState == 1" @click="more()" class="sobtn"
          >点击加载更多</a-button
        >
        <span style="text-align: center" class="timeTxt1" v-if="btnState == 3"
          >没有更多了</span
        >
        <a-button v-if="btnState == 2" :loading="true" class="sobtn">加载中</a-button>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      flag: 1,
      msgons: "",
      guanjianz: "",
      selnumber: null,
      btnState: 1,
      provinceList: [],
      jigouList: [],
      pageIndex: 1,
      onLoading:false
    };
  },
  methods: {
    // 显示隐藏器
    navbar(e) {
      let navbar = document.getElementById("pIul2");
      if (e == 1) {
        this.flag = 2;
        navbar.style.cssText = "height:auto;";
      } else {
        this.flag = 1;
        navbar.style.cssText = "height:30px;";
      }
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.jigouList = [];
        this.homeRecommedList();
      }
    },
    // 搜索
    // timer用于储存定时器,防抖调用接口
    searchSel() {
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.jigouList = [];
        this.homeRecommedList();
      }, 500);
    },

    // 选中样式函数
    selColor(e) {
      this.jigouList = [];
      this.selnumber = e;
      if (e == null) {
        this.homeRecommedList();
      } else {
        this.homeRecommedList();
      }
    },
    // 跳转机构详情页
    getJumpdetailsO(e) {
      this.$router.push("/education/detailsOrganization?id=" + e);
    },
    // 查询地址省市
    provincesel() {
      this.$ajax({
        url: "/news/provinceCity/list/province",
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.provinceList = res.data;
          // console.log(this.provinceList);
        } else {
          this.provinceList = [];
          return false;
        }
      });
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.homeRecommedList();
    },
    // 更多机构
    homeRecommedList() {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url:
          "/entrepreneurial/cominfo/homeRecommedList?pageSize=" +
          12 +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {
          comType: 2,
          shortName: this.msgons,
          province: this.selnumber,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.jigouList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.jigouList = [];
          return false;
        }
      });
    },
  },
  mounted() {
    this.provincesel();
    this.homeRecommedList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
* a {
  color: #fb6d00;
}
.coRsingleCF {
  margin-top: 16px;
}
//  自己写
//input框内文字修改
::-webkit-input-placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular;
  color: #999999 !important;
}

.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  .listDiv {
    width: 386px;
    height: 128px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 24px 16px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
      margin-right: 16px;
    }
  }
  .listDiv:nth-child(3n-2) {
    margin-left: 0px;
  }
}
.titleTxt2{
  width: 240px;
}
.cnBottom {
  width: 100%;
  margin-top: 60px;
  padding-bottom: 70px;
}
</style>
